<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 Documentation - Interface/Scroller</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Scroller">Scroller</a></h4>
      <div class="menu-item"><a href="#Scroller:start">start</a></div>
      <div class="menu-item"><a href="#Scroller:stop">stop</a></div>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="Scroller"><a href="#Scroller">Class: Scroller</a></h1>
      <p class="description">The Scroller is a Class to scroll any element with an overflow (including the window) when the mouse cursor reaches certain boundaries of that element.</p>
      <p>You must call its start method to start listening to mouse movements.</p>
      <h3>Note</h3>
      <ul>
        <li>Scroller requires the page to be in <a href="http://hsivonen.iki.fi/doctype/">Standards Mode</a>.</li>
      </ul>
      <h3>Syntax</h3>
      <pre class="javascript"><span class="kw2">new</span> Scroller<span class="br0">(</span>element<span class="br0">[</span>, options<span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Implements</h3>
      <p><a href="../../../docs/core/Class/Class.Extras.html#Events">Events</a>, <a href="../../../docs/core/Class/Class.Extras.html#Options">Options</a></p>
      <h3>Arguments</h3>
      <ol>
        <li>element - (<em>element</em>) The element to scroll.</li>
        <li>options - (<em>object</em>, optional) An object for the Scroller instance's options.</li>
      </ol>
      <h4>Options :</h4>
      <ul>
        <li>area     - (<em>number</em> or <em>object</em>: defaults to 20) The necessary boundaries to make the element scroll. Can either be an integer or an object with <em>top</em> and <em>bottom</em> values. When passed an integer, both the top and bottom are equal.</li>
        <li>velocity - (<em>number</em>: defaults to 1) The modifier for the window scrolling speed.</li>
        <li>fps      - (<em>number</em>: defaults to 50) The frames per second that the scroller updates and scrolls.</li>
      </ul>
      <h3>Events</h3>
      <ul>
        <li>change - (<em>function</em>) When the mouse reaches some boundaries, you can choose to alter some other values, instead of the scrolling offsets.</li>
      </ul>
      <h4>Signature</h4>
      <pre class="javascript">onChange<span class="br0">(</span>x, y<span class="br0">)</span>;
</pre>
      <h4>Arguments</h4>
      <ol>
        <li>x - (<em>number</em>) Current x-mouse position.</li>
        <li>y - (<em>number</em>) Current y-mouse position.</li>
      </ol>
      <h4>Examples</h4>
      <pre class="javascript"><span class="kw2">var</span> myScroller = <span class="kw2">new</span> Scroller<span class="br0">(</span>window, <span class="br0">{</span>

    area: Math.<span class="me1">round</span><span class="br0">(</span>window.<span class="me1">getWidth</span><span class="br0">(</span><span class="br0">)</span> / <span class="nu0">5</span><span class="br0">)</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;

<span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
    <span class="kw1">this</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span>;
    <span class="kw1">this</span>.<span class="me1">start</span><span class="br0">(</span><span class="br0">)</span>;

<span class="br0">}</span><span class="br0">)</span>.<span class="me1">periodical</span><span class="br0">(</span><span class="nu0">1000</span>, myScroller<span class="br0">)</span>;
</pre>
      <h2 id="Scroller:start"><a href="#Scroller:start">Scroller Method: start</a></h2>
      <p class="description">The scroller starts listening to mouse movements.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myScroller.<span class="me1">start</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myScroller = <span class="kw2">new</span> Scroller<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>;
myScroller.<span class="me1">start</span><span class="br0">(</span><span class="br0">)</span>;

</pre>
      <h2 id="Scroller:stop"><a href="#Scroller:stop">Scroller Method: stop</a></h2>
      <p class="description">The scroller stops listening to mouse movements.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myScroller.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myElement = $<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>;
<span class="kw2">var</span> myScroller = <span class="kw2">new</span> Scroller<span class="br0">(</span>myElement<span class="br0">)</span>;
myScroller.<span class="me1">start</span><span class="br0">(</span><span class="br0">)</span>;

&nbsp;
myElement.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, myScroller.<span class="kw3">stop</span>.<span class="me1">bind</span><span class="br0">(</span>myScroller<span class="br0">)</span><span class="br0">)</span>; <span class="co1">//stop scrolling when the user clicks.</span>
</pre>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
